<template>
  <div class="goods-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="goods in goodsData" :key="goods.id" @click="navTo(`/user/store/detail?id=${goods.id}`)">
        <div class="mini-shop-card">
          <div class="mini-shop-card-image" v-loading="goods.loading">
            <img :src="goods.photo" alt="商品图片" />
          </div>
          <div class="mini-shop-card-content">
            <p class="mini-shop-card-title">{{ goods.name }}</p>
            <p class="mini-shop-card-price">￥{{ goods.price }}/{{ goods.unit }}</p>
            <p class="mini-shop-card-sales">月销{{ goods.count }}笔</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { goodsListService } from '@/api/goods';

const router = useRouter();
const goodsData = ref([]);

const fetchGoodsList = async () => {
  try {
    const response = await goodsListService({}); // 调用接口获取商品列表
    goodsData.value = response.data.map(good => ({ ...good, loading: false }));
  } catch (error) {
    console.error('获取商品列表失败:', error);
  }
};

const navTo = (path) => {
  router.push(path);
};

onMounted(() => {
  fetchGoodsList();
});
</script>

<style scoped>

.goods-container {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.mb15 {
  margin-bottom: 15px;
}

.mini-shop-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px; /* 增加圆角 */
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加过渡动画 */
  cursor: pointer;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.mini-shop-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 悬停时增加阴影 */
  transform: scale(1.02); /* 悬停时轻微放大 */
}

.mini-shop-card-image {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.mini-shop-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease; /* 添加过渡动画 */
}

.mini-shop-card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* 占位图背景色 */
  transition: opacity 0.3s ease; /* 添加过渡动画 */
}

.mini-shop-card-image img[v-cloak] {
  opacity: 0; /* 图片加载前隐藏 */
}

.mini-shop-card-image img[v-cloak][v-loading] {
  opacity: 0.5; /* 加载中时半透明 */
}

.mini-shop-card-content {
  padding: 0 12px;
  text-align: center;
  flex-grow: 1;
}

.mini-shop-card-title {
  font-size: 18px; /* 增加字体大小 */
  color: #333;
  margin-top: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: bold;
}

.mini-shop-card-title:hover {
  color: #ff6700; /* 悬停时改变颜色 */
}

.mini-shop-card-price {
  font-size: 16px;
  color: #ff6700;
  margin-top: 16px;
}

.mini-shop-card-sales {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}
</style>